<template>
   <div>
      <el-menu class="el-menu-demo" mode="horizontal" @select="handleSelect"
               background-color="#545c64" text-color="#fff" active-text-color="#ffd04b" router>

         <span @click="toggle(isCollapse)" class="toggle">
            <i :class="isCollapse ? 'el-icon-s-fold' : 'el-icon-s-unfold'"></i>
         </span>

         <el-submenu index="2" class="top">
            <template slot="title">{{admin.name}} 管理员</template>
            <el-menu-item @click="handleCache">清楚缓存</el-menu-item>
            <el-menu-item @click="logout(admin)">退出登录</el-menu-item>
         </el-submenu>
         <el-menu-item index="/system/configs" class="top">系统设置</el-menu-item>
      </el-menu>
   </div>
</template>

<script>
   // var user = JSON.parse(window.sessionStorage.getItem('userInfo'));  //浏览器session获取并转为对象
   var reload = function () {
      window.location.reload();
   };
   export default {
      name: "Header",
      data() {
         return {
            admin: admin,
            // userInfo: user
            isCollapse: true
         };
      },
      methods: {
         //清楚缓存
         handleCache() {
            axios.delete(`/admin/destroy`)
               .then((res) => {
                  this.$notify({
                     title: '成功',
                     message: '清楚缓存成功~',
                     type: 'success',
                  });
                  reload();
               })
         },
         //退出登录
         logout(admin) {
            axios.post(`/admin/logout`, admin)
               .then((res) => {
                  this.$notify({
                     title: '成功',
                     message: '您已成功退出',
                     type: 'success',
                  });
                  reload();
               })
         },

         handleSelect(key, keyPath) {
            console.log(key, keyPath);
         },

         // 切换显示
         toggle(val) {
            this.isCollapse = !val;
            this.$root.Bus.$emit('toggle', this.isCollapse)
         }
      }
   }
</script>

<style scoped>
   .top {
      float: right;
   }

   .toggle {
      padding-left: 15px;
      outline: none
   }

   .el-icon-s-fold, .el-icon-s-unfold {
      font-size: 21px;
      color: #fff;
      cursor: pointer;
      vertical-align: middle;
   }
</style>